<template>
  <avue-crud ref="crud"
             :option="option"
             :data="data"
             @row-update="rowUpdate"
             @row-save="rowSave"
             @row-click="handleRowClick">
    <template #menu="{row,index}">
      <el-button text
                 type="primary"
                 :icon="row.$cellEdit?'el-icon-plus':'el-icon-edit'"
                 @click="rowCell(row,index)">{{row.$cellEdit?'自定义保存':'自定义修改'}}</el-button>
      <el-button v-if="row.$cellEdit"
                 text
                 icon="el-icon-cancel"
                 type="primary"
                 @click="$refs.crud.rowCancel(row,index)">取消</el-button>

    </template>
  </avue-crud>
</template>
<script>
export default {
  data () {
    return {
      data: [{
        id: 0,
        name: '张三',
        sex: 1,
        $cellEdit: true
      }, {
        id: 1,
        name: '李四',
        sex: 0,
      }],
      option: {
        addBtn: false,
        editBtn: false,
        addRowBtn: true,
        cellBtn: false,
        cancelBtn: false,
        column: [{
          label: '姓名',
          prop: 'name',
          cell: true,
          rules: [
            {
              required: true,
              message: '请输入姓名',
              trigger: 'blur'
            }
          ]
        }, {
          label: '性别',
          prop: 'sex',
          type: 'select',
          dicData: [{
            label: '男',
            value: 0
          }, {
            label: '女',
            value: 1
          }],
          cell: true
        }, {
          label: '开关',
          prop: 'switch',
          type: 'switch',
          cell: true
        }]
      }
    }
  },
  methods: {
    rowCell (row, index) {
      this.$refs.crud.rowCell(row, index)
    },
    rowSave (form, done) {
      this.$message.success(
        '新增数据' + JSON.stringify(form)
      )
      done()
    },
    rowUpdate (form, index, done) {
      this.$message.success(
        '编辑数据' + JSON.stringify(form) + '数据序号' + index
      )
      done()
    },
    handleRowClick (row, event, column) {
      this.$message({
        showClose: true,
        message: '序号' + row.$index,
        type: 'success',
      });
    }
  }
}
</script>